<!-- 安装告知列表 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>安装告知列表</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css" />
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none" v-show="showApp">
        <div class="top_but_box" ref="butbox">
            <el-button type="primary" @click="addBut">
                <div class="but_cont">
                    <div class="iconfont iconzengjia"></div>
                    <div class="but_txt">设备添加</div>
                </div>
            </el-button>
        </div>
        <div class="table_box" ref="tablebox">
            <el-table :data="tableData" height="100%" border :cell-style="{background:'#fff'}" ref="multipleTable"
                header-row-class-name="table_th" style="width: 100%">

                <el-table-column type="index" :index='tableIndex' label="序号" align="center" width="50">
                </el-table-column>

                <el-table-column prop="dmName" label="设备名称" align="center" width="90">
                </el-table-column>

                <el-table-column prop="dmType" label="设备类型" align="center" width="90">
                </el-table-column>

                <el-table-column prop="deviceModel" label="设备型号" align="center" width="120">
                </el-table-column>

                <el-table-column prop="location" label="设备位置" align="center" width="120">
                </el-table-column>

                <el-table-column prop="deviceSelfNo" label="自编号" align="center" width="120">
                </el-table-column>

                <el-table-column label="安装起止日期" align="center" width="120">
                    <template slot-scope="scope">
                        <p>{{scope.row.startTime}}</p>
                        <p>至</p>
                        <p>{{scope.row.endTime}}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="installationUnitName" label="安装单位" align="center" width="120">
                </el-table-column>

                <el-table-column prop="updateTime" label="修改时间" align="center" width="120">
                </el-table-column>

                <el-table-column prop="updateOperator" label="修改人" align="center" min-width="120">
                </el-table-column>


                <el-table-column prop="creator" label="创建人" align="center" min-width="120">
                </el-table-column>

                <el-table-column prop="createTime" min-width="140" label="创建时间" align="center">
                </el-table-column>


                <el-table-column  fixed="right" width="70" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="sbEdit(scope.row)" type="text">修改 </el-button>
                        <el-button @click="sbDelete(scope.row)" type="text">删除 </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination_box" ref="paginations">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
        </div>
    </div>
    <div class="hidden_box">
        <input id="publicValue" value="" type="text">
    </div>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer;
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    baseUrl: 'http://47.114.160.61:8050',
                    showApp: false,
                    pagesize: 20,
                    pageindex: 1,
                    selected: [],
                    selectid: '',
                    totals: 0,
                    projectId: '',
                    tableData: [],
                    allButData: []
                };
            },
            methods: {
                //列表序号
                tableIndex(index) {
                    return (index + 1) + (this.pageindex - 1) * this.pagesize;
                },
                // 每页显示条数切换
                handleSizeChange(val) {
                    this.pagesize = val;
                    this.pageindex = 1;
                    this.getCgjhListData()
                },
                // 页数切换
                handleCurrentChange(val) {
                    this.pageindex = val;
                    this.getCgjhListData()
                },
                //获取地址栏参数
                getQueryString(name) {
                    var reg = new RegExp("(^|/?|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = decodeURIComponent(location.href).substr(1).match(reg);
                    if (r != null) return r[2];
                    return null;
                },
                // 获取自有设备列表
                getCgjhListData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        url: this.baseUrl + '/WebProxy/Proxy?url=DeviceManagement/GetInstallationNotificationList',
                        data: {
                            param: "Page=" + that.pageindex + "&PageSize=" + that.pagesize,
                            type: "get"
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.Code != 0) {
                                that.$message({
                                    message: res.Msg ? res.Msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.tableData = res.Datas;
                            that.totals = res.Row;
                        }
                    });
                },
                //安装告知添加
                addBut() {
                    var that = this
                    layer.open({
                        type: 2,
                        title: '安装告知添加',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['90%', '90%'],
                        content: '/ApsPublic/azgz/addAzgz.html?projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            that.getCgjhListData();
                        }
                    });
                },
                // 安装告知修改
                sbEdit(row) {
                    var that = this
                    layer.open({
                        type: 2,
                        title: '原有设备修改',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['40%', '70%'],
                        content: '/ApsPublic/jcxx/editSb.html?projectId=' + that.projectId + '&jsonData=' + JSON.stringify(row) + '&' + new Date().getTime(),
                        end: function () {
                            that.getCgjhListData();
                        }
                    });
                },
                // 安装告知删除
                sbDelete(row){

                },

                getButList() {
                    var that = this
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: this.baseUrl + '/Common/GetButtonList',
                        data: JSON.stringify({
                            pagename: '采购计划'
                        }),
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                that.$message({
                                    message: res.Msg ? res.Msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.allButData = res.data
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                var that = this;
                setTimeout(function () {
                    var aa = that.$refs.butbox.offsetHeight + that.$refs.paginations.offsetHeight;
                    var ss = 'calc(100% - ' + aa + 'px)';
                    that.$refs.tablebox.style.height = ss;
                }, 2);
                this.projectId = this.getQueryString('projectId')
                this.getCgjhListData()
            }
        });
    </script>
</body>
<style>
    .page-container {
        width: 100%;
        height: 100%;
        padding: 16px;
    }

    /* 按钮 */
    .top_but_box {
        display: flex;
        padding: 16px 0;
    }

    .top_but_box .el-button {
        padding: 0;
        margin: 0;
        height: 32px;
        background: transparent;
        border: 1px solid #5574D7;
        border-radius: 5px;
        margin-right: 20px;
    }

    .top_but_box .but_cont {
        display: flex;
        padding: 0 16px;
        color: #5574D7;
        align-items: center;
    }

    .top_but_box .but_cont .but_txt {
        margin-left: 10px;
    }

    .top_but_box .el-button:focus,
    .top_but_box .el-button:hover {
        color: rgba(85, 116, 215, 1);
        border-color: rgba(85, 116, 215, 0.1);
        background-color: #ecf5ff;
    }

    .top_but_box .el-button:focus .but_cont,
    .top_but_box .el-button:hover .but_cont {
        color: rgba(85, 116, 215, 0.8);
    }

    .top_but_box .el-button:active {
        color: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        outline: none;
    }

    .top_but_box .el-button:active .but_cont {
        color: rgba(85, 116, 215, 0.8);
    }

    /* 分页 */
    .pagination_box {
        padding: 2.7vh 0 3.7vh;
    }

    .el-pagination {
        display: flex;
        justify-content: center;
    }

    .pagination_box .el-pagination button {
        border: 1px solid #D6D6D6;
        border-radius: 5px !important;
        background-color: transparent !important;
    }

    .pagination_box .el-pager li {
        border-radius: 5px !important;
        border: 1px solid #D6D6D6 !important;
        background: transparent !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #5574D7;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #5574D7 !important;
        border: none !important;
        color: #fff;
    }

    /* 表格 */
    .el-table th.gutter {
        display: table-cell !important;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #f8f8f8;
    }

    .el-table th {
        background: linear-gradient(0deg, #F5F7FA, #ECEFF6, #F5F7FA);
    }

    .table_th {
        box-shadow: 0px 1px 1px 0px rgba(234, 235, 240, 0.75), 0px 1px 1px 0px #F7F8FA;
    }

    .el-table td,
    .el-table th {
        color: #333333;
        padding: 0;
        height: 32px;
    }

    .el-tooltip__popper.is-dark {
        background: #FFFFFF;
        color: #333333;
        box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
    }

    .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
        border-top-color: #FFFFFF;
    }

    .el-tooltip__popper[x-placement^=top] .popper__arrow {
        border-top-color: #FFFFFF;
    }

    .el-table--border:after,
    .el-table--group:after,
    .el-table:before {
        background-color: #E2E2E2;
    }

    .el-table--border,
    .el-table--group {
        border-color: #E2E2E2;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #E2E2E2;
    }

    .el-table--border th,
    .el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid #E2E2E2;
    }

    .el-table--border td,
    .el-table--border th {
        border-right: 1px solid #E2E2E2;
    }

    .success-row td {
        background: #ffffff !important;
    }

    .warning-row td {
        background: #F8F8F8 !important;
    }

    .selected-row td {
        background: rgba(85, 116, 215, 0.1) !important;
    }
</style>

</html>